七爪源码：React Router vs. React Router DOM

2023-04-04 01:59| 来源: 网络整理| 查看: 265

路由是基于用户请求和操作在网站上的页面之间导航的基本技术。一个名为 React Router 的单独库支持在 React 应用程序中进行路由，并允许在应用程序中定义多个路由。但是是否安装或 react-router-dom 包可能会令人困惑。本文通过分析它们的差异以及在何处使用哪个包来解决这种混淆。

为什么需要 React 路由器？

React 是一个著名的 JavaScript 框架，非常适合构建单页应用程序。尽管它是构建网站的最佳解决方案之一，但默认情况下 React 并不包含许多高级功能或路由。因此，React Router 是这些单页应用程序渲染多个视图的绝佳导航选择。

什么是反应路由器？

React Router 是一个流行的标准库，用于在 React 应用程序中的各种视图组件之间进行路由。它有助于使用户界面与 URL 保持同步。此外，React Router 允许定义为指定 URL 显示哪个视图。

与 React Router 相关的三个主要包是：

react-router：包含 React Router 的核心功能，包括路由匹配算法和钩子。react-router-dom：包含 react-router 中的所有内容并添加了一些特定于 DOM 的 API。react-router-native：包含 react-router 中的所有内容，并添加了一些 React Native 特定的 API。

什么是反应路由器 DOM？

react-router-dom 的主要功能是在 Web 应用程序中实现动态路由。 react-router-dom 基于平台和应用程序的需求，支持基于组件的路由，如果 React 应用程序运行在浏览器上，这是理想的路由解决方案。

如何使用 React Router DOM

第 1 步：安装软件包。

npm install react-router-dom

第 2 步：导入。

import { BrowserRouter, Route } from 'react-router-dom'; function App() { return ( ); } export default App;

第 3 步：导入并使用子组件。

import { BrowserRouter, Routes, Route } from 'react-router-dom'; import About from './components/about'; import Home from './components/home'; function App() { return ( ); }

随着 URL 更改为指定路径，用户界面也会更改以显示特定组件。以下是您可以在应用程序中使用的几个组件。

：BrowserRouter 是 react-router-dom 中的一个父组件，它存储了所有其他的路由组件。允许声明单个路由是在应用程序中使用 BrowserRouter 的主要功能。：Routes 是 v6 中引入的一个新组件，替代了 switch 组件。（Switch 在显示与当前 URL 匹配的第一个子路由时专门呈现路由）。：Route 是当 URL 匹配指定路径时渲染特定 UI 组件的子组件。 path 属性指定我们分配给组件的路径名，element 属性指的是当 URL 匹配时要呈现的组件。：顾名思义，Link 允许用户通过单击它来导航到另一个页面。例如，您可以在创建应用程序的导航栏时使用它。可以向该组件添加内联样式。function Navbar() { return ( Home Profile ) }

处理未找到的页面

可能存在用户尝试访问应用程序中不存在的路径的情况。在这种情况下，您可以将星号 (*) 设置为将用户定向到“未找到页面”页面的路径。

在按照前面的代码片段声明路径后，如果用户输入了错误的路径，用户将看到“找不到页面”页面。为方便起见，您甚至可以在“未找到页面”页面中添加指向主页的链接。

React Router 与 React Router DOM：区别

react-router 是包含标准组件和功能的核心包，用于在 React 应用程序中实现路由。

另一方面，react-router-dom 是一个专门的包，您只能在基于 Web 浏览器的应用程序开发中使用它。它将 react-router 导出为依赖项，并具有附加的 DOM（文档对象模型）绑定，例如和。

何时使用哪个

如果您正在开发 Web 应用程序，更好的选择是使用 react-router-dom，因为它包含所有必要的公共组件和功能，这些组件和功能对于在 Web 应用程序中进行路由至关重要。 react-router-dom 将 react-router 作为依赖项安装，因此无需直接从 react-router 重新安装和导入任何内容。

即使在带有 React Native 的移动应用程序上，react-router-native 就足够了，原因与 react-router-dom 在 Web 应用程序中就足够了。

因此，无需在任何地方直接导入 react-router 包，因为 react-router-dom 和 react-router-native 提供了所有必需的功能。

结论

本文讨论了 React Router 的特性和用途，库 react-router 和 react-router-dom 之间的显着区别，以及何时使用哪一个。此外，还概述了 react-router-dom 包以及如何在 React 应用程序中使用它。所以，我希望这篇文章能消除关于在你的 React 应用程序中安装哪个包来实现路由的困惑。

感谢您的阅读！

关注七爪网，获取更多APP/小程序/网站源码资源！

【本文地址】

公司简介

联系我们